<template>
  <div>
    <!-- <el-button @click="approverDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="approverDialog = false" size="small">确 定</el-button> -->
    <!-- <el-dialog title="添加审批人" width="700px" class="group-dialog" :visible="true"> -->
    <div class="approver-inquiry">
      <el-form
        :model="groupParams"
        label-width="75px"
        size="mini"
        ref="ruleForm"
        label-position="right"
        @submit.native.prevent
        class="login-name"
      >
        <el-form-item label="登录名称" prop="loginName">
          <el-input
            class="filter-item"
            v-model="groupParams.loginName"
            :clearable="true"
            placeholder="登录名称"
          />
        </el-form-item>
      </el-form>
      <el-button
        class="aaa"
        slot="operator"
        type="primary"
        :plain="true"
        size="mini"
        @click="getUserList(true)"
        >查询</el-button
      >
    </div>
    <div>
      <el-table
        :data="groupList"
        size="mini"
        header-cell-class-name="table-header-gray"
        style="width: 100%"
      >
        <el-table-column label="用户名" prop="loginName"> </el-table-column>
        <el-table-column label="昵称" prop="showName"> </el-table-column>
        <el-table-column label="账号类型" prop="userTypeDictMap.name" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="getUserStatusType(scope.row.userStatus)"
              size="mini"
              >{{ SysUserStatus.getValue(scope.row.userStatus) }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="80">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              @click="handleChooseapprover(row)"
              size="mini"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-pagination
          background
          @size-change="handleSizeChangeGroup"
          @current-change="handleCurrentChangeGroup"
          :current-page="groupParams.pageNo"
          :page-size="groupParams.page_size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, prev, pager, next, sizes"
          :total="groupTotal"
        ></el-pagination>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer"></div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { SystemController } from '@/api';
export default {
  props: {
    userList: {
      type: Array,
      default: () => []
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      groupList: [],
      groupTotal: 0,
      groupParams: {
        loginName: '',
        page_size: 10,
        pageNo: 1
      }
    };
  },
  mounted () {
    console.log('传进来的参数', this.userList);
    if (this.userList.length) {
      this.groupList = this.userList;
      this.groupTotal = this.count;
    } else {
      this.getUserList();
    }
  },
  methods: {
    getUserList (type) {
      if (type) {
        this.groupParams.pageNo = 1;
      }
      SystemController.getUserList(this, {
        orderParam: [{ asc: false, fieldName: 'loginName' }],
        pageParam: {
          pageNum: this.groupParams.pageNo,
          pageSize: this.groupParams.page_size
        },
        sysUserDtoFilter: { loginName: this.groupParams.loginName }
      })
        .then((res) => {
          this.groupList = res.data.dataList;
          this.groupTotal = res.data.totalCount;
        })
        .catch((e) => { });
    },
    getUserStatusType (status) {
      if (status === this.SysUserStatus.NORMAL) {
        return 'success';
      } else if (status === this.SysUserStatus.LOCKED) {
        return 'danger';
      } else {
        return 'info';
      }
    },
    // 审批人选择
    handleChooseapprover (row, index) {
      this.onCancel(true, row);
    },
    // 分页
    handleSizeChangeGroup (val) {
      this.groupParams.page_size = val;
      this.getUserList();
    },
    handleCurrentChangeGroup (val) {
      this.groupParams.pageNo = val;
      this.getUserList();
    },
    onCancel (isSuccess, data) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, data);
      }
    },
    // 表单重置
    resetForm () {
      this.$refs['ruleForm'].resetFields();
    }
  }
};
</script>
